<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="查询内容">
        <el-input
          v-model="queryParams.content"
          placeholder="请输入查询内容"
          clearable
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="Search" @click="getall">查询所有</el-button >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="Search" @click="getdep">查询发送至本人</el-button >
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="chongzhi">重置</el-button >
      </el-form-item>
    </el-form>

    <el-table border v-loading="loading" :data="guestbookList" style="margin-bottom:10px">
      <el-table-column type="index" label="序号" align="center" width="50">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="留言标题" align="center" prop="title" />
      <el-table-column label="留言内容" align="center" prop="content" />
      <el-table-column label="留言时间" align="center" prop="createTime" width="160" />
      <el-table-column label="昵称" align="center" prop="nickname" width="120"  />
      <el-table-column label="联系方式" align="center" prop="phone" width="120"  />
      <el-table-column label="发送首长" align="center" prop="receiverName" width="100"  />
      <el-table-column label="审核状态" align="center" width="80" >
        <template slot-scope="scope">
          <span v-if="scope.row.isReview == '1'">公开</span>
          <span v-if="scope.row.isReview == '0'">隐藏</span>
        </template>
      </el-table-column>  
      <el-table-column label="回复详情" align="center" width="542">
        <template slot-scope="scope">
          <el-table :data="scope.row.newguestbookRespList" border style="width: 100%">
              <el-table-column prop="huifucontent" label="回复内容" width="180"></el-table-column>
              <el-table-column prop="huifuren" label="回复人" width="180"></el-table-column>
              <el-table-column prop="huifushijian" label="回复时间"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="delHuifu(scope.row)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <!-- <el-button
            size="mini"
            type="success" plain
            @click="handleUpdate(scope.row)"
          >查看回复详情</el-button> -->
        </template>  
      </el-table-column>  
      <el-table-column label="操作" align="center" width="160" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >回复</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleLook(scope.row)"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    

    <!-- 添加或修改留言管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="回复内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows=8 placeholder="请输入您要回复的内容" />
        </el-form-item>
      </el-form>  
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核" :visible.sync="openShenhe" width="500px" append-to-body>
      <el-form ref="formsh" :model="formsh" :rules="rulessh" label-width="80px">
        <el-form-item label="状态" prop="resource">
          <el-radio-group v-model="formsh.resource">
            <el-radio label=1>公开</el-radio>
            <el-radio label=2>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>  
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExamine('formsh')">确 定</el-button>
        <el-button @click="cancelSh">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delGuestbook } from "@/api/system/guestbook";
import { getGustbooklist, getReply, getExamine, delReply } from "@/api/yxzx/info";

export default {
  name: "Guestbook",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 留言管理表格数据
      guestbookList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openShenhe: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        receiverId: '',
        content: '',
        isReview: '',
      },
      // 表单参数
      form: {
        guestbookid: '',
        content: '',
      },
      // 审核表单
      // 表单校验
      rules: {
        content: [
          { required: true, message: '请输入回复内容', trigger: 'blur' },
        ]
      },
      formsh: {
        resource: null
      },
      rulessh: {
        resource: [
          { required: true, message: '请选择状态', trigger: 'chang' }
        ],
      },
      queryShen: {
        guestbookid: '',
        isReview: '',
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询留言管理列表 */
    getList() {
      this.loading = true;
      getGustbooklist(
        this.queryParams.pageNum,
        this.queryParams.pageSize,
        this.queryParams.receiverId,
        this.queryParams.content,
        this.queryParams.isReview
      ).then(response => {
        this.guestbookList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelSh() {
      this.openShenhe = false;
      this.resetsh();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        content: null,
        reply: null,
        addtime: null,
        replytime: null,
        state: undefined,
        ordernum: null,
        str1: null,
        str2: null,
        str3: null,
        str4: null,
        str5: null
      };
      this.resetForm("form");
    },
    resetsh() {
      this.formsh = {
        resource: null
      };
      this.resetForm("formsh");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询所有 */
    getall(){
      this.queryParams.receiverId = ''
      this.getList()
    },
    /** 重置按钮 */
    chongzhi(){
      this.queryParams.receiverId = ''
      this.queryParams.content = ''
      this.getList()
    },
    /** 查询本部门 */
    getdep(){
      this.queryParams.receiverId = this.$store.getters.id
      this.getList()
    },
    /** 回复按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.guestbookid || this.ids
      this.open = true;
      this.title = "回复留言";
      this.form.guestbookid = row.guestbookid
      // getGuestbook(guestbookid).then(response => {
      //   this.form = response.data;
        
      // });
    },
    /** 审核按钮操作 */
    handleLook(row) {
      this.queryShen.guestbookid = row.guestbookid 
      this.resetsh();
      this.openShenhe = true;
    },
    /** 提交按钮 */
    submitForm(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          getReply(this.form).then(response => {
            this.$modal.msgSuccess("留言回复成功");
            this.open = false;
            this.resetForm("form");
            this.getList();
          });
        }
      });
    },
    /**审核按钮 */
    submitExamine(name){
      this.queryShen.isReview = this.formsh.resource
      this.$refs[name].validate(valid => {
        if (valid) {
          getExamine(this.queryShen).then(response => {
            this.$modal.msgSuccess("审核提交成功");
            this.openShenhe = false;
            this.resetsh();
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.guestbookid || this.ids;
      this.$modal.confirm('是否确认删除该留言？').then(function() {
        return delGuestbook(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 删除回复
    delHuifu(val){
      console.log(val.replyid)
      const arr = [] 
      arr.push(val.replyid)
      this.$confirm('您确定要删除该条回复吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        delReply(arr).then(response => {
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              }); 
              this.getList()           
          })
      }).catch(() => {
          this.$message({
              type: 'info',
              message: '已取消删除'
          });          
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/guestbook/export', {
        ...this.queryParams
      }, `guestbook_${new Date().getTime()}.xlsx`)
    },
    /** 分页 */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
  }

};
</script>
